<template>
  <div class="speech-container">
    <h2>Python脚本生成</h2>
    <div class="input-section">
      <input class="my-input" v-model="text" placeholder="请输入文字" />
      <button @click="convert" class="convert-button">转换语音</button>
    </div>
    <p class="python-output">{{ message }}</p>
    <audio ref="audioRef" controls :src="audioUrl" class="audio-player"></audio>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      text: '',
      message: '',
      audioUrl: '/SpeechRecognition/voice/1', // 你的音乐文件的基础 URL
    }
  },
  methods: {
    async convert() {
      const response = await axios.post('http://localhost:9000/SpeechRecognition3/convert', { text: this.text });
      this.message = response.data;
    }
  }
}
</script>

<style>
.my-input {
  margin-bottom: 30px;
  margin-right: 30px;
}

.speech-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
  left: -10px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.input-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

.convert-button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.convert-button:hover {
  background-color: #0056b3;
}

.python-output {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.audio-player {
  margin-top: 10px;
  width: 100%;
}
</style>